Completed
Push — master ( e2c47b...19fc28 )
by Felipe
52s
created

QUnit.test(ꞌundelegateEventsꞌ)   B

Complexity

Conditions 1
Paths 1

Size

Total Lines 27

Duplication

Lines 0
Ratio 0 %

Importance

Changes 1
Bugs 0 Features 0
Metric Value
cc 1
c 1
b 0
f 0
nc 1
nop 1
dl 0
loc 27
rs 8.8571
1
(function() {
2
3
  var view;
4
5
  QUnit.module('Backbone.View', {
6
7
    beforeEach: function(assert) {
8
      $('#qunit-fixture').append(
9
        '<div id="testElement"><h1>Test</h1></div>'
10
      );
11
12
      view = new Backbone.View({
13
        id: 'test-view',
14
        className: 'test-view',
15
        other: 'non-special-option'
16
      });
17
    },
18
19
    afterEach: function() {
20
      $('#testElement').remove();
21
      $('#test-view').remove();
22
    }
23
24
  });
25
26
  QUnit.test('constructor', function(assert) {
27
    assert.expect(3);
28
    assert.equal(view.el.id, 'test-view');
29
    assert.equal(view.el.className, 'test-view');
30
    assert.equal(view.el.other, void 0);
31
  });
32
33
  QUnit.test('$', function(assert) {
34
    assert.expect(2);
35
    var myView = new Backbone.View;
36
    myView.setElement('<p><a><b>test</b></a></p>');
37
    var result = myView.$('a b');
38
39
    assert.strictEqual(result[0].innerHTML, 'test');
40
    assert.ok(result.length === +result.length);
41
  });
42
43
  QUnit.test('$el', function(assert) {
44
    assert.expect(3);
45
    var myView = new Backbone.View;
46
    myView.setElement('<p><a><b>test</b></a></p>');
47
    assert.strictEqual(myView.el.nodeType, 1);
48
49
    assert.ok(myView.$el instanceof Backbone.$);
50
    assert.strictEqual(myView.$el[0], myView.el);
51
  });
52
53
  QUnit.test('initialize', function(assert) {
54
    assert.expect(1);
55
    var View = Backbone.View.extend({
56
      initialize: function() {
57
        this.one = 1;
58
      }
59
    });
60
61
    assert.strictEqual(new View().one, 1);
62
  });
63
64
  QUnit.test('render', function(assert) {
65
    assert.expect(1);
66
    var myView = new Backbone.View;
67
    assert.equal(myView.render(), myView, '#render returns the view instance');
68
  });
69
70
  QUnit.test('delegateEvents', function(assert) {
71
    assert.expect(6);
72
    var counter1 = 0, counter2 = 0;
73
74
    var myView = new Backbone.View({el: '#testElement'});
75
    myView.increment = function(){ counter1++; };
76
    myView.$el.on('click', function(){ counter2++; });
77
78
    var events = {'click h1': 'increment'};
79
80
    myView.delegateEvents(events);
81
    myView.$('h1').trigger('click');
82
    assert.equal(counter1, 1);
83
    assert.equal(counter2, 1);
84
85
    myView.$('h1').trigger('click');
86
    assert.equal(counter1, 2);
87
    assert.equal(counter2, 2);
88
89
    myView.delegateEvents(events);
90
    myView.$('h1').trigger('click');
91
    assert.equal(counter1, 3);
92
    assert.equal(counter2, 3);
93
  });
94
95
  QUnit.test('delegate', function(assert) {
96
    assert.expect(3);
97
    var myView = new Backbone.View({el: '#testElement'});
98
    myView.delegate('click', 'h1', function() {
99
      assert.ok(true);
100
    });
101
    myView.delegate('click', function() {
102
      assert.ok(true);
103
    });
104
    myView.$('h1').trigger('click');
105
106
    assert.equal(myView.delegate(), myView, '#delegate returns the view instance');
107
  });
108
109
  QUnit.test('delegateEvents allows functions for callbacks', function(assert) {
110
    assert.expect(3);
111
    var myView = new Backbone.View({el: '<p></p>'});
112
    myView.counter = 0;
113
114
    var events = {
115
      click: function() {
116
        this.counter++;
117
      }
118
    };
119
120
    myView.delegateEvents(events);
121
    myView.$el.trigger('click');
122
    assert.equal(myView.counter, 1);
123
124
    myView.$el.trigger('click');
125
    assert.equal(myView.counter, 2);
126
127
    myView.delegateEvents(events);
128
    myView.$el.trigger('click');
129
    assert.equal(myView.counter, 3);
130
  });
131
132
133
  QUnit.test('delegateEvents ignore undefined methods', function(assert) {
134
    assert.expect(0);
135
    var myView = new Backbone.View({el: '<p></p>'});
136
    myView.delegateEvents({'click': 'undefinedMethod'});
137
    myView.$el.trigger('click');
138
  });
139
140
  QUnit.test('undelegateEvents', function(assert) {
141
    assert.expect(7);
142
    var counter1 = 0, counter2 = 0;
143
144
    var myView = new Backbone.View({el: '#testElement'});
145
    myView.increment = function(){ counter1++; };
146
    myView.$el.on('click', function(){ counter2++; });
147
148
    var events = {'click h1': 'increment'};
149
150
    myView.delegateEvents(events);
151
    myView.$('h1').trigger('click');
152
    assert.equal(counter1, 1);
153
    assert.equal(counter2, 1);
154
155
    myView.undelegateEvents();
156
    myView.$('h1').trigger('click');
157
    assert.equal(counter1, 1);
158
    assert.equal(counter2, 2);
159
160
    myView.delegateEvents(events);
161
    myView.$('h1').trigger('click');
162
    assert.equal(counter1, 2);
163
    assert.equal(counter2, 3);
164
165
    assert.equal(myView.undelegateEvents(), myView, '#undelegateEvents returns the view instance');
166
  });
167
168
  QUnit.test('undelegate', function(assert) {
169
    assert.expect(1);
170
    var myView = new Backbone.View({el: '#testElement'});
171
    myView.delegate('click', function() { assert.ok(false); });
172
    myView.delegate('click', 'h1', function() { assert.ok(false); });
173
174
    myView.undelegate('click');
175
176
    myView.$('h1').trigger('click');
177
    myView.$el.trigger('click');
178
179
    assert.equal(myView.undelegate(), myView, '#undelegate returns the view instance');
180
  });
181
182
  QUnit.test('undelegate with passed handler', function(assert) {
183
    assert.expect(1);
184
    var myView = new Backbone.View({el: '#testElement'});
185
    var listener = function() { assert.ok(false); };
186
    myView.delegate('click', listener);
187
    myView.delegate('click', function() { assert.ok(true); });
188
    myView.undelegate('click', listener);
189
    myView.$el.trigger('click');
190
  });
191
192
  QUnit.test('undelegate with selector', function(assert) {
193
    assert.expect(2);
194
    var myView = new Backbone.View({el: '#testElement'});
195
    myView.delegate('click', function() { assert.ok(true); });
196
    myView.delegate('click', 'h1', function() { assert.ok(false); });
197
    myView.undelegate('click', 'h1');
198
    myView.$('h1').trigger('click');
199
    myView.$el.trigger('click');
200
  });
201
202
  QUnit.test('undelegate with handler and selector', function(assert) {
203
    assert.expect(2);
204
    var myView = new Backbone.View({el: '#testElement'});
205
    myView.delegate('click', function() { assert.ok(true); });
206
    var handler = function(){ assert.ok(false); };
207
    myView.delegate('click', 'h1', handler);
208
    myView.undelegate('click', 'h1', handler);
209
    myView.$('h1').trigger('click');
210
    myView.$el.trigger('click');
211
  });
212
213
  QUnit.test('tagName can be provided as a string', function(assert) {
214
    assert.expect(1);
215
    var View = Backbone.View.extend({
216
      tagName: 'span'
217
    });
218
219
    assert.equal(new View().el.tagName, 'SPAN');
220
  });
221
222
  QUnit.test('tagName can be provided as a function', function(assert) {
223
    assert.expect(1);
224
    var View = Backbone.View.extend({
225
      tagName: function() {
226
        return 'p';
227
      }
228
    });
229
230
    assert.ok(new View().$el.is('p'));
231
  });
232
233
  QUnit.test('_ensureElement with DOM node el', function(assert) {
234
    assert.expect(1);
235
    var View = Backbone.View.extend({
236
      el: document.body
237
    });
238
239
    assert.equal(new View().el, document.body);
240
  });
241
242
  QUnit.test('_ensureElement with string el', function(assert) {
243
    assert.expect(3);
244
    var View = Backbone.View.extend({
245
      el: 'body'
246
    });
247
    assert.strictEqual(new View().el, document.body);
248
249
    View = Backbone.View.extend({
250
      el: '#testElement > h1'
251
    });
252
    assert.strictEqual(new View().el, $('#testElement > h1').get(0));
253
254
    View = Backbone.View.extend({
255
      el: '#nonexistent'
256
    });
257
    assert.ok(!new View().el);
258
  });
259
260
  QUnit.test('with className and id functions', function(assert) {
261
    assert.expect(2);
262
    var View = Backbone.View.extend({
263
      className: function() {
264
        return 'className';
265
      },
266
      id: function() {
267
        return 'id';
268
      }
269
    });
270
271
    assert.strictEqual(new View().el.className, 'className');
272
    assert.strictEqual(new View().el.id, 'id');
273
  });
274
275
  QUnit.test('with attributes', function(assert) {
276
    assert.expect(2);
277
    var View = Backbone.View.extend({
278
      attributes: {
279
        'id': 'id',
280
        'class': 'class'
281
      }
282
    });
283
284
    assert.strictEqual(new View().el.className, 'class');
285
    assert.strictEqual(new View().el.id, 'id');
286
  });
287
288
  QUnit.test('with attributes as a function', function(assert) {
289
    assert.expect(1);
290
    var View = Backbone.View.extend({
291
      attributes: function() {
292
        return {'class': 'dynamic'};
293
      }
294
    });
295
296
    assert.strictEqual(new View().el.className, 'dynamic');
297
  });
298
299
  QUnit.test('should default to className/id properties', function(assert) {
300
    assert.expect(4);
301
    var View = Backbone.View.extend({
302
      className: 'backboneClass',
303
      id: 'backboneId',
304
      attributes: {
305
        'class': 'attributeClass',
306
        'id': 'attributeId'
307
      }
308
    });
309
310
    var myView = new View;
311
    assert.strictEqual(myView.el.className, 'backboneClass');
312
    assert.strictEqual(myView.el.id, 'backboneId');
313
    assert.strictEqual(myView.$el.attr('class'), 'backboneClass');
314
    assert.strictEqual(myView.$el.attr('id'), 'backboneId');
315
  });
316
317
  QUnit.test('multiple views per element', function(assert) {
318
    assert.expect(3);
319
    var count = 0;
320
    var $el = $('<p></p>');
321
322
    var View = Backbone.View.extend({
323
      el: $el,
324
      events: {
325
        click: function() {
326
          count++;
327
        }
328
      }
329
    });
330
331
    var view1 = new View;
332
    $el.trigger('click');
333
    assert.equal(1, count);
334
335
    var view2 = new View;
336
    $el.trigger('click');
337
    assert.equal(3, count);
338
339
    view1.delegateEvents();
340
    $el.trigger('click');
341
    assert.equal(5, count);
342
  });
343
344
  QUnit.test('custom events', function(assert) {
345
    assert.expect(2);
346
    var View = Backbone.View.extend({
347
      el: $('body'),
348
      events: {
349
        fake$event: function() { assert.ok(true); }
350
      }
351
    });
352
353
    var myView = new View;
354
    $('body').trigger('fake$event').trigger('fake$event');
355
356
    $('body').off('fake$event');
357
    $('body').trigger('fake$event');
358
  });
359
360
  QUnit.test('#1048 - setElement uses provided object.', function(assert) {
361
    assert.expect(2);
362
    var $el = $('body');
363
364
    var myView = new Backbone.View({el: $el});
365
    assert.ok(myView.$el === $el);
366
367
    myView.setElement($el = $($el));
368
    assert.ok(myView.$el === $el);
369
  });
370
371
  QUnit.test('#986 - Undelegate before changing element.', function(assert) {
372
    assert.expect(1);
373
    var button1 = $('<button></button>');
374
    var button2 = $('<button></button>');
375
376
    var View = Backbone.View.extend({
377
      events: {
378
        click: function(e) {
379
          assert.ok(myView.el === e.target);
380
        }
381
      }
382
    });
383
384
    var myView = new View({el: button1});
385
    myView.setElement(button2);
386
387
    button1.trigger('click');
388
    button2.trigger('click');
389
  });
390
391
  QUnit.test('#1172 - Clone attributes object', function(assert) {
392
    assert.expect(2);
393
    var View = Backbone.View.extend({
394
      attributes: {foo: 'bar'}
395
    });
396
397
    var view1 = new View({id: 'foo'});
398
    assert.strictEqual(view1.el.id, 'foo');
399
400
    var view2 = new View();
401
    assert.ok(!view2.el.id);
402
  });
403
404
  QUnit.test('views stopListening', function(assert) {
405
    assert.expect(0);
406
    var View = Backbone.View.extend({
407
      initialize: function() {
408
        this.listenTo(this.model, 'all x', function(){ assert.ok(false); });
409
        this.listenTo(this.collection, 'all x', function(){ assert.ok(false); });
410
      }
411
    });
412
413
    var myView = new View({
414
      model: new Backbone.Model,
415
      collection: new Backbone.Collection
416
    });
417
418
    myView.stopListening();
419
    myView.model.trigger('x');
420
    myView.collection.trigger('x');
421
  });
422
423
  QUnit.test('Provide function for el.', function(assert) {
424
    assert.expect(2);
425
    var View = Backbone.View.extend({
426
      el: function() {
427
        return '<p><a></a></p>';
428
      }
429
    });
430
431
    var myView = new View;
432
    assert.ok(myView.$el.is('p'));
433
    assert.ok(myView.$el.has('a'));
434
  });
435
436
  QUnit.test('events passed in options', function(assert) {
437
    assert.expect(1);
438
    var counter = 0;
439
440
    var View = Backbone.View.extend({
441
      el: '#testElement',
442
      increment: function() {
443
        counter++;
444
      }
445
    });
446
447
    var myView = new View({
448
      events: {
449
        'click h1': 'increment'
450
      }
451
    });
452
453
    myView.$('h1').trigger('click').trigger('click');
454
    assert.equal(counter, 2);
455
  });
456
457
  QUnit.test('remove', function(assert) {
458
    assert.expect(2);
459
    var myView = new Backbone.View;
460
    document.body.appendChild(view.el);
461
462
    myView.delegate('click', function() { assert.ok(false); });
463
    myView.listenTo(myView, 'all x', function() { assert.ok(false); });
464
465
    assert.equal(myView.remove(), myView, '#remove returns the view instance');
466
    myView.$el.trigger('click');
467
    myView.trigger('x');
468
469
    // In IE8 and below, parentNode still exists but is not document.body.
470
    assert.notEqual(myView.el.parentNode, document.body);
471
  });
472
473
  QUnit.test('setElement', function(assert) {
474
    assert.expect(3);
475
    var myView = new Backbone.View({
476
      events: {
477
        click: function() { assert.ok(false); }
478
      }
479
    });
480
    myView.events = {
481
      click: function() { assert.ok(true); }
482
    };
483
    var oldEl = myView.el;
484
    var $oldEl = myView.$el;
485
486
    myView.setElement(document.createElement('div'));
487
488
    $oldEl.click();
489
    myView.$el.click();
490
491
    assert.notEqual(oldEl, myView.el);
492
    assert.notEqual($oldEl, myView.$el);
493
  });
494
495
})();
496